<template>
  <div class="addRT">
    <el-page-header @back="goBack" content="添加模板">
    </el-page-header>
    <el-form ref="form" :model="form" label-width="80px" >
      <el-form-item label="模板名称" style="width:600px;">
        <el-input v-model="form.name" show-word-limit maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="下载限制">
        <el-select v-model="form.pay" placeholder="请选择">
          <el-option label="免费" value="0"></el-option>
          <el-option label="会员" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传封面" style="height:180px">
        <el-upload
            action="#"
            list-type="picture-card"
            multiple
            name="imgFile"
            :limit="1"
            ref="uploadImg"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemovePicture"
            :on-exceed="handleExceedPicture"
            :http-request="uploadImg"
            :on-change="handleChangePicture"
            :auto-upload="false"
            accept=".png, .jpg"
            :file-list="imgList"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" style="margin-top: 0;" slot="tip">只能上传.jpg/.png图片，且不超过10Mb</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="上传文件" style="height: 230px;width:35%" >
        <el-upload
            ref="upload"
            :limit="1"
            multiple
            drag
            action="#"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="uploadFile"
            accept=".doc, .docx"
            :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" style="margin-top: 0;line-height: 1" slot="tip">只能上传.doc/.docx文件，且不超过100Mb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-button style="margin-left: 78px;" size="small" type="primary" @click="submitUpload">上传模板</el-button>
  </div>
</template>

<script>
import axios from "axios";
//vue默认header
const token = localStorage.getItem("admin_TOKEN");
axios.defaults.headers.common['TOKEN'] = token;
export default {
  name: "AddRT",
  data() {
    return {
      dialogVisible: false,
      form:{
        name:'',
        pay:'0',
      },
      dialogImageUrl: '',
      fileData: '',  // 文件上传数据（多文件合一）
      fileList: [],   // upload多文件数组
      imgList:[]

    };
  },
  methods: {
    // 上传文件
    uploadFile(file) {
      this.fileData.append('file', file.file);  // append增加数据
    },
    uploadImg(file) {
      this.fileData.append('img', file.file);  // append增加数据
    },
    submitUpload() {
      if(this.form.name==''){
        this.$message.warning("标题不能为空")
      }
      if (this.fileList.length === 0) {
        this.$message({
          message: '请先选择文件',
          type: 'warning'
        })
      } else {
        const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
        const isLt10M = this.imgList.every(file => file.size / 1024/1024  < 10);
        if (!isLt100M || !isLt10M) {
          this.$message.error('请检查，上传文件大小不能超过100MB,图片不能超过10MB!');
        } else {
          this.fileData = new FormData();  // new formData对象
          this.$refs.uploadImg.submit();
          this.$refs.upload.submit();  // 提交调用uploadFile函数
          this.fileData.append('name', this.form.name);  // 添加机构id
          this.fileData.append('pay', this.form.pay);  // 添加token
          axios.post("/api/resumeTemplate/upload/?ser=transmission",this.fileData).then((response) => {
            if (response.data.code === 100) {
              this.$message.success(response.data.data);
              this.fileList = [];
              this.imgList=[];
            }else{
              this.$message.error(response.data.msg);
            }
          });
        }
      }
    },
    //移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    // 选取文件超过数量提示
    handleExceed() {
      // this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning("文件已存在，请先移除")
    },


    //监控上传文件列表
    handleChange(file, fileList) {
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if (existFile) {
        this.$message.error('当前文件已经存在!');
        fileList.pop();
      }
      this.fileList = fileList;
    },

    handleRemovePicture(file, fileList) {
      this.imgList = fileList;
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceedPicture(){
      this.$message.warning("文件已存在，请先移除")
    },
    handleChangePicture(file, fileList) {
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if (existFile) {
        this.$message.error('当前文件已经存在!');
        fileList.pop();
      }
      this.imgList = fileList;
    },
    goBack(){
      this.$router.push({name:'resumeTemplateManage'})
    }

  },


}
</script>

<style scoped>

</style>